<template>  
  <view class="registration-form">  
    <!-- 假设这里是一个图片展示区，你可以使用网络图片或本地图片 -->  
  
    <!-- 表单内容 -->  
    <view class="form-container">  
      <view class="form-item">  
        <text class="label">中学名称 <text style="color: red;">*</text></text>  
      </view>  
  <input class="input" type="text" placeholder="请输入中学名称" />
  
      <view class="form-item" style="margin-top: 20px;">  
        <text class="label">到访日期 <text style="color: red;">*</text></text>  
      </view>  
  <input class="input" type="text" placeholder="请选择日期" />
  
      <view class="form-item" style="margin-top: 20px;">  
        <text class="label">宣传形式 <text style="color: red;">*</text></text>  
      </view>  
  <input type="text" placeholder="请选择宣传形式" class="input">
      <button class="submit-btn" @click="submitForm" style="margin-top:40px;">提交</button>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      dateValue: '', // 存储选中的日期  
      selectedOption: '', // 存储选中的宣传形式  
      options: ['海报', '传单', '讲座', '其他'], // 宣传形式的选项  
    };  
  },  
  methods: {  
    handleDateChange(e) {  
      this.dateValue = e.value;  
    },  
    handleOptionChange(e) {  
      this.selectedOption = this.options[e.target.value];  
    },  
    submitForm() {  
      // 在这里处理表单提交的逻辑  
      console.log('表单提交', {  
        schoolName: this.$refs.schoolName.value, // 假设你有一个ref来获取中学名称的input值  
        visitDate: this.dateValue,  
        promotionForm: this.selectedOption,  
      });  
      // 注意：上面的schoolName获取方式需要你在input上添加ref="schoolName"  
      // 但在这个例子中，我们直接使用了data中的值来演示  
    },  
  },  
};  
</script>  
  
<style scoped>  
.registration-form {  
  padding: 20px;  
  /* background-color: #fff;  */
  border-radius: 8px;  
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);  */
}  
  page {
	  background-color: #f5f5f9;
  }
.header-image {  
  width: 100%;  
  height: 200px; /* 根据需要调整高度 */  
  margin-bottom: 20px;  
}  
  
.form-container {  
  margin-bottom: 20px;  
}  
  
.form-item {  
  margin-bottom: 15px;  
  display: flex;  
  align-items: center;  
}  
  
.label {  
  flex: 1;  
  font-weight: bold;  
  margin-right: 10px;  
}  
  
.input, .picker {  
  flex: 3;  
  padding: 10px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
}  
  
.submit-btn {  
  background-color: #007aff;  
  color: #fff;  
  border: none;  
  padding: 10px 20px;  
  border-radius: 4px;  
  cursor: pointer;  
}  
input {
	background-color: #fff;
}
</style>